import styled from '@emotion/styled';
import { ButtonNoPadding, Row } from 'components/lib';
import { useAuth } from 'context/auth-context';
import React, { useState } from 'react';
import { ProjectListScreen } from 'screens/project-list';
import { ReactComponent as SoftwareLogo } from 'assets/software-logo.svg';
import { Button, Dropdown, Menu } from 'antd';
import userEvent from '@testing-library/user-event';
import { Route, Routes } from 'react-router';
import { BrowserRouter as Router, Navigate } from 'react-router-dom';
import { ProjectScreen } from 'screens/project';
import { resetRoute } from 'utils';
import { ProjectModal } from 'screens/project-list/project-modal';
import { ProjectPopover } from 'components/project-popover';
import { UserPopover } from 'components/user-popover';

export default function UnauthenticatedApp() {
  const { logout, user } = useAuth();

  return <Container>
    <Router>
      <PageHeader />
      <Main>
        {/* <ProjectListScreen /> */}

        <Routes>
          <Route path={'projects'} element={<ProjectListScreen />}></Route>
          <Route path={'projects/:projectId/*'} element={<ProjectScreen />}></Route>
          {user && <Route path={'/'} element={<Navigate to={'/projects'} />} />}
        </Routes>

      </Main>
      <ProjectModal />
    </Router>
  </Container>
};

const PageHeader = () => {

  return <Header between={true}>
    <HeaderLeft gap={true}>
      <ButtonNoPadding type={'link'} onClick={resetRoute}>
        <SoftwareLogo width={'18rem'} color={'rgb(38, 132, 255)'} />
      </ButtonNoPadding>
      <ProjectPopover />
      <UserPopover />
    </HeaderLeft>
    <HeaderRight>
      <User />
    </HeaderRight>

  </Header>
}

const User = () => {
  const { logout, user } = useAuth();
  return <Dropdown overlay={<Menu>
    <Menu.Item key={'logout'}>
      <Button onClick={logout} type={'link'}>登出</Button>
    </Menu.Item>
  </Menu>}>
    <Button onClick={e => e.preventDefault()} type={'link'}>
      Hi, {user?.name}
    </Button>
  </Dropdown>
}

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr ;
  grid-template-areas: "header"
  "main";
  height: 100vh;
`

const Header = styled(Row)`
  grid-area: header;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`

const Main = styled.main`
  grid-area: main;
  display: flex;
  overflow: hidden;
`;

const HeaderLeft = styled(Row)`

`
const HeaderRight = styled.div`

`

